<template>
  <div class="emergencyEvent">
    <h3>森林火情专题报告</h3>
    <div class="eventBox">
      <p :class="{eventItem:true, activeEvent:currentId === item.id}" v-for="(item, index) of eventList" :key="index" @click="flyTo(item)">
        <span :title="item.title">{{index + 1}}、{{item.title}}</span>
        <span>{{item.updateTime.split(' ')[0].slice(5)}}</span>
      </p>
    </div>
    <div class="btnBox" ref="btnBox">
      <p @click="changeReport('专报')">专报</p>
      <p @click="changeReport('简报')">简报</p>
    </div>
    <EventReport v-if="showReport === '专报'" :eventInfo="currentEvent"></EventReport>
  </div>
</template>

<script>
import axios from 'axios'
import EventReport from './EventReport/EventReport.vue'
let handler3D = null;
let entityModel = [];
export default {
  name:"emergencyEvent",
  data(){
    return{
      eventList:[],
      currentEvent:{},
      showReport:null,
      currentId:null,//当前点击的事件id
      tempId:null,
    }
  },
  components:{
    EventReport,
  },
  mounted(){
    this.getEventData();
    this.$nextTick(()=>{
      handler3D = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      handler3D.setInputAction(this.pickeFireEvent, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    })
  },
  methods:{
    // 获取事件接报列表
    async getEventData(){
      let eventRes = await axios.get('/data/event.json');
      // let eventRes = await axios.get('http://172.25.110.34:8084/findByCreateTime');
      this.eventList = eventRes.data.reverse();
      this.dataToEarth(this.eventList)
    },
    // 切换事件
    flyTo(data){
      // 飞到球上的某个点
      // this.currentEvent = data;
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(data.lon,data.lat,20000),
      });
    },
    // 显示报告
    changeReport(type){
      this.showReport = type
      this.currentId = this.tempId
      this.$refs.btnBox.style.display = 'none'
      this.currentEvent = this.eventList.filter(ele=>ele.id === this.currentId)[0]
    },
    // 拾取
    pickeFireEvent(movement){
      let that = this;
      let pickedObject = viewer.scene.pick(movement.position);
      if (
        Cesium.defined(pickedObject) &&
        Cesium.defined(pickedObject.id) &&
        pickedObject.id.entityType === 'event'
      ) {
        that.tempId = pickedObject.id.id;
        // 坐标
        const ray = viewer.camera.getPickRay(movement.position);
        const cartesian = viewer.scene.globe.pick(ray, viewer.scene);
        const zuobiao = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, cartesian);
        const left = zuobiao.x + 20;
        const top = zuobiao.y + 20;
        that.$refs.btnBox.style.left = left + 'px'
        that.$refs.btnBox.style.top = top + 'px'
        that.$refs.btnBox.style.display = 'block'


        // // 内容
        // that.fireId = pickedObject.id.id;
        // that.showDetail = true;
        // // 把id传递给报告
        // this.$emit('setFireId', that.fireId)
      }else{
        console.log('none')
        that.$refs.btnBox.style.display = 'none'
      }
    },
    // 点位上球
    dataToEarth(data){
      entityModel.forEach(ele=>{
        viewer.entities.remove(ele)
      })
      entityModel = [];
      //添加标记
      for (let item of data) {
        if(item.lon && item.lat){
          let entity = viewer.entities.add({
            name: item.title + item.id,
            id: item.id,
            position: Cesium.Cartesian3.fromDegrees(item.lon, item.lat),
            billboard: {
              // image: `./images/fireIcon/caodi.png`,
              image: `./images/fireReport/position.png`,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
              width:30,
              height:30,
              scaleByDistance: new Cesium.NearFarScalar(10000, 1.5, 100000, 1),
              disableDepthTestDistance : Number.POSITIVE_INFINITY
            },
            entityType:"event",
          });
          entityModel.push(entity);
        }
      }
    },
  },
  beforeUnmount(){
    entityModel.forEach(ele=>{
      viewer.entities.remove(ele)
    })
    entityModel = [];
    if(handler3D){
      handler3D.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
      handler3D = null;
    }
  },
}
</script>

<style lang="stylus" scoped>
.emergencyEvent{
  position: fixed;
  right: 20px;
  bottom: 10px;
  top: 500px;
  width: 340px;
  padding: 10px;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  display: flex;
  flex-direction: column;
  h3{
    font-size: 24px;
  }
  .eventBox{
    flex:1;
    margin:10px;
    text-align: left;
    
    overflow: auto;
    color: #000;
    &::-webkit-scrollbar {
      display: none;
    }
    .eventItem{
      overflow: hidden;//高度塌陷
      cursor: pointer;
      line-height:40px;
      background: rgba(229, 241, 255, .9);
      margin-bottom: 10px;
      border-radius: 5px;
      padding:5px;
      span:last-child{
        float: right;
        line-height: 40px;
      }
    }
    .activeEvent, .eventItem:hover{
      color:#28639c;
    }
  }
  .btnBox{
    display: none;
    position:fixed;
    left:500px;
    top:300px;
    padding:10px 15px;
    background:rgba(0, 20, 32, .8);
    border:1px solid #0c4f55;
    color:#fff;
    line-height:26px;
    opacity: 0.8;
    background: #05253c;
    border: 1px solid #17d0ff;
    p{
      cursor: pointer;
    }
    p:hover{
      color:#00e5fd;
    }
  }
}
</style>